<template>
	<div class="">
		<bread-crumb>發布賽事-入口</bread-crumb>
		<div class="uc-body">
			<div class="flex-jc-sb" >
				<el-button @click="$router.push('/manage')" round>
					<i class="el-icon-arrow-left"></i>投票中心
				</el-button>
				<el-button @click="visibleExplain=true" round>
					<i class="el-icon-question"></i>賽事流程說明
				</el-button>
			</div>

			<!--入口-->
			<div class="guide-button">
				<div class="item">
					<button class="bt bt-football" @click="actGuide('football')">
						<span>足球賽</span>
						<span>→</span>

					</button>
				</div>
				<div class="item">
					<button class="bt bt-basketball" @click="actGuide('basketball')">
						<span>蓝球賽</span>
						<span>→</span>
					</button>
				</div>
			</div>


		</div>
		<el-dialog
			title=""
			width="480px"
			top="calc(50vh - 250px)"
			:append-to-body="true"
			:visible.sync="visibleExplain"
		>
			<vote-create-explain></vote-create-explain>
		</el-dialog>
	</div>
</template>

<script>

//数据
import breadCrumb from '../components/breadCrumb.vue'
import { mixins } from '@/mixins/mixins'
import voteCreateExplain from "./components/voteCreateExplain.vue";
//资源


//导出
export default {
	name:"manageCreateVoteDispatch",
	components: { breadCrumb,voteCreateExplain },
	mixins:[mixins],
	//用于开发的
	data () {
		return {
			visibleExplain : false,// 投票简要说明对话框
		}
	},
	computed: {},
	created () {},
	mounted () {},
	methods: {
		//分发
		actGuide(act){
			if(act=='football'){
				this.$router.push('CreateVoteFootball')
			}else if(act=='basketball'){
				this.$router.push('CreateVoteBasketball')
			}
		},
	},

}
</script>

<style lang="less" scoped>
/*公共变量*/
@import '~@/assets/global.less';

//导航，大按钮模式
.guide-button{
	padding:10px 0;
	.item{
		padding:10px 0;
		.bt{
			color:#333;
			font-size: 22px;
			font-weight: bold;
			width:100%;
			background-color: #ffffff;
			border:1px solid #333;
			padding:0 1.5em;
			height:3.5em;
			line-height: 2.3em;
			border-radius: 0px;
			text-align: left;
			.flex-jcsb();
			//border:1px solid #222;
			&:hover{
				background-color: #eee;
			}
		}
		.bt-football {color: #15a2b5;}
		.bt-basketball {color: #1542b5;}
	}
}
/************************************适应***************************************/
/************************************适应***************************************/
/************************************适应***************************************/
@media screen and (max-width: @MINSCREEN){

}
</style>
